﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>{{ dashboard_name }}</title>
    <script src="/static/echarts-main.js"></script>
    <script src="/static/jquery.js"></script>
    <link rel="stylesheet" href="/static/prettify/example2/style.css" />
  </head>
  <body>
    <div class="loading">
      <div class="loadbox"><img src="/static/prettify/example2/images/loading.gif" /> loading...</div>
    </div>

    <div class="head">
      <h1><a href="#">{{ dashboard_name }}</a></h1>
      <div style="display: none;" id="query_result">
        {{query_result}}
      </div>
      <h1 style="display: none" id="dashboardId">{{ dashboard_id }}</h1>
    </div>
    <div class="mainbox">
      <div class="topnav">
        <ul class="clearfix">
          {% for query in query_result %}
            {%if query.chart_type == 'table'%}
            <li>
              <div class="boxall" id="table{{ query.id }}">
                <div class="tit01">{{ query.chart_name }}</div>
                <div class="boxnav">
                  <div class="listhead gdhead">
                  {% for column in query['data']['columns'] %}
                    <span>{{ column.name }}</span>
                  {% endfor %}
                  </div>
                  <div class="listnav scrollDiv">
                    <ul class="smjl">
                      {% for row in query['data']['rows'] %}
                        <li>
                          {% for column in query['data']['columns'] %}
                            <span>{{ row[column.name] }}</span>
                          {% endfor %}
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                </div>
                <div class="boxfoot"></div>
              </div>
            </li>
          {% else %}
          <li>
            <div class="boxall">
              <div class="tit01">{{ query.chart_name }}</div>
              <div class="boxnav" id="echart{{ query.id }}"></div>
              <div class="boxfoot"></div>
            </div>
          </li>
          {% endif %}
        {% endfor %}
        </ul>
      </div>
      
    </div>

    <script>
      $(window).load(function () {
        $(".loading").fadeOut();
      });

      $(document).ready(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 20 });
        $(window).resize(function () {
          var whei = $(window).width();
          $("html").css({ fontSize: whei / 20 });
        });
      });
    </script>
     <script>
      function decodeHtml(html) {
  var txt = document.createElement('textarea');
  txt.innerHTML = html;
  return txt.value;
}
      function getDashboardData() {
  return new Promise((resolve, reject) => {
    var DashboardData = document.getElementById("query_result").innerHTML;
    DashboardData = DashboardData.replace(/None/g, "''").replace(/<br>/g, "");
    DashboardData = eval('(' + DashboardData + ')');
    var dashboard_id = document.getElementById('dashboardId').innerHTML;
    $.ajax({
      url: '/api/dashboards/' + dashboard_id,
      type: 'get',
      dataType: 'json',
      success: function (res) {
        if (res && res['widgets']) {
          for (var i = 0; i < res['widgets'].length; i++) {
            if (res['widgets'][i]['visualization']['query']) {
              if (res['widgets'][i]['visualization']['query']['id'] === DashboardData[i]['id']) {
                DashboardData[i]['latest_query_data_id'] = res['widgets'][i]['visualization']['query']['latest_query_data_id'];
              }
            }
          }
        }
        resolve(DashboardData);
      },
      error: function (error) {
        reject(error);
      }
    });
  });
}
     async function echart_code() {
      
      // var dashboard_id = document.getElementById('dashboardId').innerHTML
      var query_result =await getDashboardData()
      for (var i = 0; i < query_result.length; i++) {
        (function(i) {
        $.ajax({
          url: '/api/queries/' + query_result[i].id + '/results/' + query_result[i].latest_query_data_id + '.json',
          type: 'get',
          dataType: 'json',
          success: function (res) {
        if (query_result[i].chart_type == 'table') {
          var table = document.getElementById('table' + query_result[i].id)
          // columns
          var columns = res['query_result']['data']['columns']
          var columns_html = ''
          for (var j = 0; j < columns.length; j++) {
            columns_html += '<span>' + columns[j].name + '</span>'
          }
          table.getElementsByClassName('gdhead')[0].innerHTML = columns_html
          // rows
          var rows = res['query_result']['data']['rows']
          var rows_html = ''
          for (var j = 0; j < rows.length; j++) {
            rows_html += '<li>'
            for (var k = 0; k < columns.length; k++) {
              rows_html += '<span>' + rows[j][columns[k].name] + '</span>'
            }
            rows_html += '</li>'
          }
          table.getElementsByClassName('smjl')[0].innerHTML = rows_html
  
        } else {
          var chart = echarts.init(document.getElementById('echart' + query_result[i].id))
          var option =decodeHtml(query_result[i]['echart_code'])
          console.log(option, "option====")
          option = eval('(' + option + ')');
          var x_field = Object.keys(query_result[i]['columnMapping']).find(key => query_result[i]['columnMapping'][key] === 'x');
          var y_fields = Object.keys(query_result[i]['columnMapping']).filter(key => query_result[i]['columnMapping'][key] === 'y');
          
          if (query_result[i].chart_type == 'line' || query_result[i].chart_type == 'bar' || query_result[i].chart_type == 'area') {
            option.xAxis.data = res['query_result']['data']['rows'].map(function (item) {
              return item[x_field]
            })
            for (var j = 0; j < option.series.length; j++) {
            option.series[j].data = res['query_result']['data']['rows'].map(function (item) {
              return item[option.series[j].name]
            })
          }
          } else if (query_result[i].chart_type == 'pie') {
            for (var j = 0; j < option.series.length; j++) {
            option.series[j].data = res['query_result']['data']['rows'].map(function (item) {
              return {
                name: item[x_field],
                value: item[y_fields[0]]
              }
            })
          }
          }
          chart.setOption(option)
          window.addEventListener("resize", function () {
            chart.resize()
          })
        }
        }
        })
      })(i);
      }
    }
  
    $(window).load(function () {
      setInterval(function () {
        echart_code()
      }, 60000)
      echart_code()
    });
      </script>
  </body>
</html>
